import * as React from 'react'
import {View, SafeAreaView, Text, Image, TextInput ,StyleSheet, TouchableOpacity} from 'react-native'
import Back from '../../../../common/component/back'

const carameImg = require('../../../../common/img/carame.png')


class Suggest extends React.Component {

  constructor(props){
    super(props)
  }

  state = {qusActive: true, sugActive: false}

  render() {

    let {navigation} = this.props;

    return(
      <SafeAreaView style={styles.container}>
        <View style={{ flex: 1 ,margin: 20}}>
          <Back navigation={navigation} witheIcon={false}></Back>

          <Text style={[styles.title, styles.marginT20]}>意见反馈</Text>
          <Text style={[styles.littleTitle, styles.marginT20 ]}>反馈类型</Text>
          <View style={[styles.typeView, styles.marginT20]}>
            <TouchableOpacity style={[styles.typeBtn, this.state.qusActive && styles.active,]} onPress = {()=>{ this.setState({qusActive: true, sugActive: false})}}>
              <Text style={this.state.qusActive && styles.activeText}>问题</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.typeBtn, this.state.sugActive && styles.active,]} onPress = {()=>{ this.setState({qusActive: false, sugActive: true})}}>
              <Text style={this.state.sugActive && styles.activeText}>建议</Text>
            </TouchableOpacity>
          </View>

          <Text style={[styles.littleTitle, styles.marginT20]}>反馈内容</Text>
          <View style={[styles.sugTextView, styles.marginT20]}>
            <TextInput multiline={true} style={styles.sugText} placeholder={"请描述你的问题或建议，以便我们提供更好的帮助"}></TextInput>
            <View style={styles.carameView}>
              <Image source={carameImg}></Image>
            </View>
            
          </View>

        
        <TouchableOpacity style={styles.submitBtn}>
          <Text style={{ color: "white", fontWeight: "bold"}}>提交反馈</Text>
        </TouchableOpacity>
         
        </View>
        
      </SafeAreaView>
    )
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    // margin: 20,
    backgroundColor: 'white'
  },
  marginT20: {
    marginTop: 20
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
  },
  littleTitle: {
    fontSize:14,
    color: "rgb(153, 153, 153)",
  },
  typeView: {
    flexDirection: "row",
    height: 46
  },
  typeBtn: {
    width: 80,
    height: 36,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
    borderColor: "black",
    borderWidth: 2,
    borderRadius: 18,
  
  },
  sugTextView: {
    borderWidth: 1,
    borderColor: "black",
    borderWidth: 2,
    height: 160,
    borderRadius: 10,
    padding: 16
  },
  sugText: {
    height: 80, 
    color: "black"
  },
  carameView: {
    width: 46,
    height: 46,
    borderRadius: 6,
    borderColor: "black",
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  submitBtn: {
    position: "absolute",
    bottom: 50,
    width: "100%",
    height: 50,
    backgroundColor: 'black',
    borderRadius: 25,
    color: "white",
    fontSize: 14,
    fontWeight: "bold",
    alignItems: "center",
    justifyContent: "center"
  },
  active: {
    backgroundColor: "black",
    color: "white",
  
  },
  activeText:  {
    color: "white",
    fontWeight: "bold"
  }

})



export default Suggest